<template>
  <div class='questions'>
    <!-- 卡片容器 -->
    <el-card class="box-card">
      <!-- 上传按钮 -->
      <div class="addTopic">
        <el-button type="success" size="small"  @click="$router.push('/questions/new')" >
          <i class="el-icon-edit">新增试题</i>
        </el-button>
      </div>
      <!-- 筛选框 / form表单包裹 -->
      <el-form ref="request" :model="request" label-width="80px">
        <el-row>
          <el-col :span="6">
            <!-- 学科 -->
            <el-form-item label="学科" prop="subjectID">
              <el-select v-model="request.subjectID" clearable placeholder="请选择" @change="subjectChange">
                <el-option :label="item.label" :value="item.value" v-for="item in subjectList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <!-- 二级目录 -->
            <el-form-item label="二级目录"  prop="catalogID">
              <el-select v-model="request.catalogID" clearable placeholder="请选择">
                <el-option :label="item.directoryName" :value="item.id" v-for="item in directoryList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 标签 -->
            <el-form-item label="标签" prop="tags">
              <el-select v-model="request.tags" clearable placeholder="请选择">
                <el-option :label="item.tagName" :value="item.tagName" v-for="item in tagsList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 关键字 -->
            <el-form-item label="关键字"  prop="keyword">
              <el-input v-model="request.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 试题类型 -->
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="request.questionType" clearable placeholder="请选择">
                <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 难度 -->
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="request.difficulty" clearable placeholder="请选择">
                <el-option :label="item.label" :value="item.value" v-for="item in difficulty" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 方向 -->
            <el-form-item label="方向" prop="direction">
              <el-select v-model="request.direction" clearable placeholder="请选择">
                <el-option :label="item" :value="item" v-for="(item, idx) in direction" :key="idx"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 录入人 -->
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="request.creatorID" clearable placeholder="请选择">
                <el-option :label="item.username" :value="item.id" v-for="item in entering" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 题目备注 -->
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="request.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 企业简称 -->
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="request.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 城市  @change='provincesChange'-->
            <el-form-item label="城市" prop="province">
              <el-select
                placeholder="请选择"
                clearable
                filterable
                v-model="request.province"
                style="width:47%">
                 <el-option
                    v-for="(item, idx) in provincesData"
                    :key="idx"
                    :label="item"
                    :value="item">
                  </el-option>
              </el-select>
              <!--    filterable  clearable-->
              <el-select
                v-model="request.citys"
                style="margin-left: 10px; width:47%"
                placeholder="请选择">
                <el-option
                    v-for="(item, idx) in citysDate"
                    :key="idx"
                    :label="item"
                    :value="item">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6" >
            <el-button type="primary" class="operation" size="small" @click="search" :loading='isloading'>搜索</el-button>
            <el-button class="operation" size="small" @click="resetForm">清除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据总数提示 -->
      <el-alert
        :closable='false'
        :title='this.record'
        type="info"
        show-icon>
      </el-alert>
      <!-- 内容显示 -->
      <el-table
        :data="items"
        v-loading="isloading"
        style="width: 100%; margin-top:20px">
        <!-- 试题编号 -->
        <el-table-column
          prop="number"
          align='center'
          label="试题编号"
          width="130">
        </el-table-column>
        <!-- 学科 -->
        <el-table-column
          label="学科"
          align='center'
          width="80">
          <template slot-scope="scope">
            <div v-for="item in subjectList" :key="item.id">
              <div v-if="item.value === scope.row.subjectID">{{item.label}}</div>
            </div>
          </template>
        </el-table-column>
        <!-- 目录 -->
        <el-table-column
          label="目录"
          align='center'
          prop="catalog"
          width="100">
        </el-table-column>
        <!-- 题型 -->
        <el-table-column
          label="题型"
          align='center'
          width="80">
          <template slot-scope="scope">
            <div v-if='scope.row.questionType === "1"'>单选</div>
            <div v-else-if='scope.row.questionType === "2"'>多选</div>
            <div v-else-if='scope.row.questionType === "3"'>简答</div>
          </template>
        </el-table-column>
        <!-- 题干 -->
        <el-table-column
          label="题干"
          align='center'
          width="150">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <!-- 录入时间 -->
        <el-table-column
          label="录入时间"
          align='center'
          width="130">
          <template slot-scope="scope">
            {{scope.row.addDate | formatDate}}
          </template>
        </el-table-column>
        <!-- 难度 -->
        <el-table-column
          label="难度"
          align='center'
          width="80">
          <template slot-scope="scope">
            <div v-if='scope.row.difficulty === "1"'>简单</div>
            <div v-else-if='scope.row.difficulty === "2"'>一般</div>
            <div v-else-if='scope.row.difficulty === "3"'>困难</div>
          </template>
        </el-table-column>
        <!-- 录入人 -->
        <el-table-column
          prop="creator"
          label="录入人"
          align='center'
          width="100">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          align='center'
          width="300"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain icon="el-icon-view" circle @click="previewBtn(scope.row)"></el-button>
            <el-button type="success" size="mini" plain icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
            <el-button type="danger" size="mini" plain icon="el-icon-delete" circle @click="del(scope.row)"></el-button>
            <el-button type="warning" size="mini" plain icon="el-icon-check" circle @click="handpick(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 hide-on-single-page-->
      <el-pagination
        style="float:right; margin:20px 0"
        background
        @size-change='sizeChange'
        @current-change="pageChange"
        layout="prev, pager, next, sizes, jumper"
        :current-page='request.page'
        :page-sizes="[2, 5, 10, 20, 50, 100]"
        :page-size='5'
        :total="counts">
      </el-pagination>
    </el-card>
    <Preview ref="preview" :subjectList='subjectList'></Preview>
  </div>
</template>

<script>
// 引入基础题库列表api / XX学科列表 / 目录列表 / 标签列表 / 用户列表 / 简单列表 / 加入精选题库 / 删除题目
import { list, directoryList, tagsList, userList, simpleList, choiceAdd, remove } from '@/api/hmmm/questions.js'
// 引入表单文档 -> 难度/ 试题类型 / 方向
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 引入城市数据 / 城市下地区
import { provinces, citys } from '../../api/hmmm/citys.js'
// 引入moment事件格式工具
import moment from 'moment'
// 引入预览模块
import Preview from '@/module-hmmm/components/articles-preview-yhd.vue'

export default {
  name: 'questions',
  data () {
    return {
      // 表单(请求)数据
      request: {
        citys: null, // 所在城市
        province: null, // 所在省份
        shortName: '', // 企业简称
        remarks: '', // 题目备注
        creatorID: null, // 录入人
        direction: null, // 方向
        difficulty: null, // 试题难度
        questionType: null, // 试题类型
        keyword: '', // 关键字
        tags: null, // 标签名称
        catalogID: null, // 二级目录
        subjectID: null, // 学科ID
        page: 1, // 当前页码
        pagesize: 5 // 当前页数
      },
      tagsList: [], // 标签列表
      directoryList: [], // 二级目录列表
      subjectList: [], // 学科列表
      items: [], // 内容列表数据
      entering: [], // 录入人列表
      // pages: 1, // 总页数
      counts: null, // 总记录数
      provincesData: [], // 城市数据
      citysDate: [], // 地区数据
      isloading: false
    }
  },
  // 注册组件
  components: { Preview },
  // 时间过滤器
  filters: {
    formatDate: (val) => {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  created () {
    // 获取内容基础题库列表
    this.getTopic()
    // 获取学科列表
    this.getSubjec()
    // 录入人列表
    this.usersList()
    this.chengshi()
  },
  // 计算属性
  computed: {
    // 难度
    difficulty () {
      return difficulty
    },
    // 试题类型
    questionType () {
      return questionType
    },
    // 方向
    direction () {
      return direction
    },
    // 内容总数
    record () {
      return `数据一共有${this.counts}条`
    }
  },
  // 侦听器
  watch: {
    // 监听城市绑定数据变化,修改地区数据
    'request.province' (newVal) {
      this.request.citys = ''
      this.citysDate = citys(newVal)
    }
  },
  // 事件回调
  methods: {
    // 预览按钮
    previewBtn (row) {
      this.$refs.preview.open(row)
    },
    // 获取城市数据
    chengshi () {
      this.provincesData = provinces()
    },
    // 编辑题目
    edit (row) {
      this.$router.push({
        path: '/questions/new',
        query: { id: row.id }
      })
    },
    // 删除题目
    del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove({ id: row.id })
          this.$message.success('删除题目成功!')
          this.getTopic()
        } catch (err) {
          this.$message.error('删除失败!')
        }
      }).catch(() => {
      })
    },
    // 添加精选
    handpick (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        try {
          await choiceAdd({
            id: row.id,
            choiceState: '1'
          })
          this.getTopic()
          this.$message.success('已添加精品题库!')
        } catch (err) {
          console.log(err)
          this.$message.error('添加失败!')
        }
      }).catch(() => {
      })
    },
    // 整体筛选框清除
    resetForm () {
      this.$refs.request.resetFields()
    },
    // 用户列表
    async usersList () {
      try {
        const res = await userList({
          page: 1,
          pagesize: 99,
          keyword: this.request.keyword
        })
        this.entering = res.data.list
      } catch (err) {
        console.log(err)
        this.$message.error('数据请求失败!')
      }
    },
    // 搜索
    search () {
      // 按钮切换加载状态
      this.isloading = true
      this.request.page = 1
      try {
        this.getTopic()
        this.isloading = false
      } catch (err) {
        console.log(err)
        this.isloading = false
      }
    },
    // 学科下拉菜单变化
    async subjectChange () {
      // 二级目录
      try {
        const res1 = await directoryList({ subjectID: this.request.subjectID })
        this.directoryList = res1.data.items
      } catch (err) {
        console.log(err)
        this.$message.error('数据请求失败!')
      }
      try {
        const res2 = await tagsList({ subjectID: this.request.subjectID })
        this.tagsList = res2.data.items
      } catch (err) {
        console.log(err)
        this.$message.error('数据请求失败!')
      }
    },
    // 页码变化事件
    pageChange (newPage) {
      this.request.page = newPage
      this.getTopic()
    },
    // 每页条数变化触发
    sizeChange (newSize) {
      this.request.pagesize = newSize
      this.getTopic()
    },
    // 获取学科列表
    async getSubjec () {
      try {
        const res1 = await simpleList()
        this.subjectList = res1.data
      } catch (err) {
        console.log(err)
        this.$message.error('学科数据获取失败!!')
      }
    },
    // 获取基础题库列表
    async getTopic () {
      try {
        const res = await list(this.request)
        this.items = res.data.items
        this.counts = res.data.counts
      } catch (err) {
        console.log(err)
        this.$message.error('数据获取失败!!')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.questions{
  padding: 20px;
    .addTopic{
     display: flex;
     flex-direction: row-reverse;
     margin-bottom: 20px;
    }
  .operation{
      float:right;
      margin-left: 10px;
  }
  /deep/ .el-pagination__jump{
    margin-left: 0;
  }
 }
 .el-col{
   height: 60px;
 }
 .el-select{
   width: 100%;
 }
 .el-input {
   width: 100%;
 }
</style>
